<template>
    <div class="app">
        <paymentNavbar title="订单详情"></paymentNavbar>
        <div>
            <list>
                <cell>
                    <div class="evaluation_product">
                        <div class="evaluation_logistics_titleBox">
                          <text class="evaluation_product_content_money_title font-size32"> 付款给:{{auctionOrder.sellerName}}</text>
                            <text class="evaluation_product_content_money_title font-size32">付款金额</text>
<!--                            <text class="evaluation_product_content_money_peice font-size32" style="color:#eb594f;">¥{{(Number(orderForm.price) + (Number(orderForm.price)*Number(orderForm.addPrice)/100)).toFixed(2)}}</text>-->
                          <text class="evaluation_product_content_money_peice font-size32" style="color:#eb594f;">¥{{Number(orderForm.price)}}</text>

                        </div>
                        <div>
                            <div class="submit_payMethod">
                                <div class="submit_payMethod_Header">
                                    <text class="submit_payMethod_Header_Title">支付方式</text>
                                </div>
                                <div class="submit_payMethod_Content" v-for="(item,index) in payForm" @click="paymentClick">
                                    <div>
                                        <div class="submit_payMethod_Content_Column_wrap">
                                            <div class="submit_payMethod_Content_Column_image">
                                                <image class="submit_payMethod_Content_Column_image" v-if="item.bankInfoId == 30" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankJH.png"></image>
                                                <image class="submit_payMethod_Content_Column_image" v-else-if="item.bankInfoId == 2" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/Alipay.png"></image>
                                                <image class="submit_payMethod_Content_Column_image" v-else-if="item.bankInfoId == 1" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/weixin1.png"></image>
                                                <image class="submit_payMethod_Content_Column_image" v-else src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankAll.png"></image>
                                            </div>
                                            <div class="submit_payMethod_Content_Title_wrap">
                                                <text class="submit_payMethod_Content_Title">{{item.bank}} </text>
                                            </div>
                                        </div>
                                    </div>
                                    <switch style='zoom:0.7' :checked="payIndex == index" @click="changeClick(index)" />
                                </div>
                            </div>
<!--                            <div class="cash-btn">-->
<!--                                <div class="cash-btn-button" type="primary" @click="paymentClick">-->
<!--                                    <text class="cash-btn-button-text">确定</text>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                        <div>
                            <div class="evaluation_img">
                            </div>
                            <div class="evaluation_product_content">
                                <div class="evaluation_product_content_money">
                                    <text class="evaluation_product_content_money_title font-size30">请添加对方好友并向对方完成付款</text>
                                </div>
                            </div>
                            <div class="evaluation_img">
                                <div class="evaluation_img_upload">
                                    <upload @metaClick="metaClick($event,index)"></upload>
                                </div>
                                <text class="evaluation_img_title" style="color: gray;">付款凭证 </text>
                            </div>
                        </div>
                    </div>
                    <div class="evaluation_botton">
                        <div class="evaluation_botton_box botton_Bg_Color" @click="confirmClick">
                            <text class="evaluation_botton_box_title botton_Fz_Color">确定付款</text>
                        </div>
                    </div>
                </cell>
            </list>
        </div>
        <div class="privacyBox" @click="" v-if="payType == true">
            <div class="privacyContent">
                <div style="padding:25px">
                    <text style="font-size:30px;">开户名:</text>
                    <text style="font-size:30px;margin-top:5px">{{payForm[payIndex].bankName}}</text>
                    <text style="font-size:30px;margin-top:10px">卡号:</text>
                    <text style="font-size:30px;margin-top:5px">{{payForm[payIndex].bankNum}}</text>
                </div>
                <image class="privacyContentImg" v-if="payForm[payIndex].bank=='微信'|| payForm[payIndex].bank=='支付宝'" :src="payForm[payIndex].qrcode" />
                <div class="privacy_botton">
                    <div class="privacy_botton_left" @click="paycancel">
                        <text class="privacy_botton_left_title">关闭</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
const storage = weex.requireModule("storage");
import paymentNavbar from "./components/myNavbar/paymentNavbar";
import upload from "./components/upload/upload.vue";
import { accountList, payment, find } from "@/api/auctionOrder";
export default {
    name: "paymentDetails.vue",
    components: { paymentNavbar, upload },
    data() {
        return {
            name: "张三",
            PaymentAmount: "100",
            paymentType: "alipayPay",
            orderForm: {},
            payForm: [],
            payIndex: 0,
            payType: false,
            qrcode: "",
            loadding: false,
            auctionOrder:{}
        };
    },
    created() {
        this.orderForm = app.config.params;
        this.accountListClick();
        this.auctionOrderFind();
    },
    methods: {
      auctionOrderFind(){
        let params = this.orderForm.id
        find(params).then(res=>{
          this.auctionOrder = res.data
        })
      },
        accountListClick() {
            var _this = this;
            accountList({ auctionOrderId: _this.orderForm.id })
                .then((res) => {
                    _this.payForm = res.data;
                })
                .catch((error) => {
                });
        },
        changeClick(index) {
            this.payIndex = index;
            this.paymentClick()
        },
        paymentClick() {
            this.payType = true;
        },
        paycancel() {
            this.payType = false;
        },
        metaClick($event, index) {
          this.qrcode = $event.images[0]
        },
        confirmClick() {
          if(this.isNull(this.qrcode)){
            eeui.toast({
              message: '请上传付款凭证'
            })
            return false;
          }

            var _this = this;
            if (_this.loadding == true) {
                return;
            }
            _this.loadding = true;

            payment({
                accountId: _this.payForm[_this.payIndex].id,
                auctionOrderId: _this.orderForm.id,
                voucher: _this.qrcode,
            })
                .then((res) => {
                    _this.loadding = false;
                    storage.setItem("auctionOrder", "true", (event) => {
                    });
                    eeui.closePage();
                })
                .catch((error) => {
                    _this.loadding = false;
                });
        },
    },
};
</script>
<style scoped>
.app {
    background-color: rgba(248, 248, 248, 1);
}
page {
    background-color: rgba(248, 248, 248, 0.8);
}

.evaluation_logistics {
    width: 700px;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-left: 25px;
    padding: 40px 25px;
    box-sizing: border-box;
    margin-top: 25px;
}

.evaluation_logistics_title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    font-weight: bold;
}

.evaluation_logistics_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 30px;
}

.evaluation_logistics_xingxingBox {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.evaluation_logistics_xingxing {
    font-size: 50px;
    font-weight: 400;
    color: #eb594f;
    line-height: 42px;
}

.evaluation_logistics_no_xingxing {
    font-size: 50px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.1);
    line-height: 42px;
}

.evaluation_logistics_xingxingTitle {
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.5;
}

.evaluation_product {
    width: 700px;
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-left: 25px;
    padding: 40px 25px;
    box-sizing: border-box;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.evaluation_logistics_titleBox {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    /*width: 100%;*/
    width: 400px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(232, 234, 237, 1);
}

.evaluation_logistics_title {
    font-weight: bold;
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
}

.evaluation_product_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.evaluation_product_content_img {
    width: 120px;
    height: 120px;
    background: rgba(249, 249, 249, 1);
    border-radius: 4px;
    overflow: hidden;
}

.evaluation_product_content_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
}

.evaluation_product_content_title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    display: block;
    width: 500px;
}

.evaluation_product_content_subtitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 36px;
    opacity: 0.5;
    display: block;
    margin-top: 8px;
    width: 500px;
}

.evaluation_product_evaluation {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.evaluation_product_evaluation_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.evaluation_product_memo {
    width: 650px;
    height: 168px;
    background: rgba(247, 247, 249, 1);
    border-radius: 4px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.evaluation_product_memo_title {
    width: 600px;
    height: 118px;
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    opacity: 0.3;
}

.evaluation_botton {
    width: 700px;
    border-radius: 16px;
    margin-left: 25px;
    padding: 40px 25px;
    box-sizing: border-box;
    margin-top: 25px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.evaluation_botton_box {
    width: 600px;
    height: 80px;
    opacity: 0.8;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.evaluation_botton_box_title {
    font-size: 32px;
    font-weight: 400;
    color: white;
}
.evaluation_img {
    background: rgba(255, 255, 255, 1);
    border-radius: 16px;
    margin-top: 25px;
    box-sizing: border-box;
}

.evaluation_img_title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 42px;
    display: block;
    margin-bottom: 25px;
    font-weight: bold;
    text-align: center;
}
.evaluation_product_content_money {
    display: flex;
    flex-direction: column;
}
.evaluation_product_content_money_title {
    text-align: center;
    color: #747474;
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 20px;
}
.evaluation_product_content_money_peice {
    text-align: center;
    font-size: 60px;
}
.evaluation_img_upload {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
font-size32 {
    font-size: 32px;
}
.botton_Bg_Color {
    background-color: rgba(237, 86, 75, 1);
}

.cash-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.cash-btn-button {
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 600px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #00b43c;
}
.cash-btn-button-text {
    color: white;
    font-size: 32px;
}

input {
    background: none;
    outline: none;
    border: 0px;
}

.cash-main {
    margin: 30px;
    background-color: #f7f7f7;
    border-radius: 14px;
}

.cash-top {
    padding: 40px;
    background-color: #fff;
    border-radius: 14px;
}
.cash-top-text {
    font-size: 30px;
    color: #555;
}

.cash-center {
    padding-top: 10px;
    background-color: #fff;
}

.cash-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 55px;
    padding: 30px 0;
}

.cash-center-mark {
    margin-left: 40px;
    margin-right: 40px;
    font-size: 42px;
}

.cash-center-input {
    background-color: #fff;
    flex: 1;
    min-height: 65px;
}

page {
    background-color: rgba(248, 248, 248, 0.8);
}

.submit_product_details_IntroductionTwo {
    font-size: 24px;
    line-height: 26px;
    color: rgba(231, 91, 83, 1);
}

.submit_payMethod {
    width: 690px;
    padding: 25px;
    box-sizing: border-box;
    margin-top: 30px;
    background-color: white;
    border-radius: 16px;
}

.submit_payMethod_Header_Title {
    font-size: 32px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
}

.submit_payMethod_Content {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 50px;
}

.submit_payMethod_Content_Column {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.submit_payMethod_Content_Title {
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    display: block;
}
.submit_payMethod_Content_SubTitle_item {
    display: flex;
    flex-direction: row;
    margin: 10px 0 0 10px;
}
.submit_payMethod_Content_SubTitle_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.submit_payMethod_Content_SubTitle {
    font-size: 24px;
    font-weight: 400;
    color: rgba(231, 91, 83, 1);
    line-height: 36px;
    display: block;
}

.submit_payMethod_Content_Title_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.submit_payMethod_Content_Column_wrap {
    display: flex;
    flex-direction: row;
}

.submit_payMethod_Content_Column_image {
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    width: 48px;
    height: 48px;
}
.privacyBox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}
.privacyContent {
    width: 650px;
    /* height: 900px; */
    background-color: white;
    border-radius: 12px;
    display: flex;
    /* align-items: center; */
    padding-bottom: 50px;
}

.privacy_botton {
    width: 650px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}
.privacy_botton_left {
    width: 280px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(202, 250, 241, 1);
    border-radius: 50px;
}
.privacy_botton_left_title {
    font-size: 22px;
    color: rgba(42, 195, 185, 1);
}
.privacy_botton_right {
    width: 280px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 222, 189, 1);
    border-radius: 50px;
}
.privacy_botton_right_ittle {
    color: white;
    font-size: 22px;
}
.privacyContentImg {
    width: 600px;
    height: 600px;
    margin-top: 25px;
    margin-left: 25px;
}
</style>
